<template>
  <div class="hosptal-patient">
   <el-col :span='24'>
      <div class='zaiinfo'> 全院 | 【在院人数{{data_info.count}}人 今日入院:{{data_info.todayEnter}}人
         今日出院:{{data_info.todayLeave}}人 】</div> 
      </el-col>
      <el-col :span="24" style>
        <el-form :inline="true"  class="demo-form-inline" v-model="formInline">
          <el-form-item label="搜索">
            <el-input
              placeholder="请输入姓名/门诊号/身份证号"
              v-model="formInline.rightKeyValue"
              clearable
              @change="radiochang"
               size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="radiochang"
              >
                查询
              </el-button>
            </el-input>
          </el-form-item>
           <el-form-item label="当天入院" >
          <el-checkbox v-model="formInline.today"  @change="radiochang"></el-checkbox>
          </el-form-item>
          
          <el-form-item label="类型">
            <el-select
              v-model="formInline.rightRadio"
              @change="radiochang"
              multiple
              placeholder="类型"
               size="small"
            >
              <el-option
                v-for="item in Radiooptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="范围">
            <el-select
              v-model="formInline.range"
              @change="radiochang"
              placeholder="范围"
               size="small"
            >
              <el-option
                v-for="item in Radiooptions2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="病区">
            <el-select
              v-model="formInline.icu_id"
              @change="radiochang"
              placeholder="病区"
              width='300'
               size="small"
            >
            <el-option
                label="全部"
                value=""
              >
              </el-option>
              <el-option
                v-for="item in getBuildlist"
                :key="item.value"
                :label="item.name"
                :value="item.id"
                 size="small"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">占 {{ item.full_bed_count }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">空 {{ item.empty_bed_count }}</span>
              </el-option>

            </el-select>
          </el-form-item>
            <el-form-item label="病人性质">
            <el-select
              v-model="formInline.nature"
              @change="radiochang"
              placeholder="性质"
              size="small"
            >
             <el-option
               
                label="全部"
                value=""
              >
              </el-option>
              <el-option
                v-for="item in member_lv"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
 </el-col>
    <el-col :span='24' class='hosptal_cardbox' >
      <div class="hosptal-grid">
            <el-card
              class="hosptal-card2"
              :body-style="{ padding: '0px' }"
              v-for="(item, index) in patientlist"
              :key="index"
            >
              <div
                class="cardhover"
                :style="
                  index_t == index ? 'background:#aeecd1c2;border:#aeecd1' : ''
                "
                @click="Select(index)"
              >
                <el-col :span="24">
                  

                  <el-col :span='24' class="card-title" :style="item.member.gender=='男'?'background:#87CEFA'
                  :item.member.gender=='女'?'background:#FFB6C1':'background:#DCDFE6'">
              <div class="" >
                 
                {{item.room_info[item.room_info.length-1]?item.room_info[item.room_info.length-1]:'待入院'}}

               
              </div>
            </el-col>

                  <div class="box_user" style="padding:20px;">
                    <el-col :span="24" class="card-span">
                 
                    {{ item.member.name }}/{{
                          item.member.gender
                        }}/{{ item.member.age }}岁</el-col
                      >
                    
                    <el-col :span="24">
                      <el-col :span="24" >
                        <el-col :span="12">
                          <div>
                            <span class="span_title">押金:</span
                            >{{
                              item.wallet.id == 0
                                ? "未交"
                                : item.wallet.wallet_income
                            }}
                          </div>
                        </el-col>
                        <el-col :span="24">
                          <div>
                            <span class="span_title">人员类型：</span>
                             {{item.memberNature}}
                          </div>
                        </el-col>
                      </el-col>
                      <el-col :span="24" style="paddingTop:10px;">
                        <el-col :span="12">
                          <div>
                            <span class="span_title">医生： </span
                            >{{ item.doctor.real_name }}
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <span class="span_title">护士: </span
                            >{{ item.nurse.real_name }}
                          </div>
                        </el-col>
                      </el-col>
                      <el-col :span="24" style="paddingTop:10px;">
                        <div>
                          <span class="span_title">病区: </span
                          >{{ item.room_info[2]+'-'+item.room_info[3]  }}
                        </div>
                      </el-col>

                      <el-col :span="24" style="paddingTop:10px;">
                        <div>
                          <span class="span_title">护理级别: </span
                          ><span>{{ item.nurse_levelneme }}</span>
                        </div>
                      </el-col>

                      <el-col :span="24" style="paddingTop:10px;">
                        <el-col :span="8" class="span_title">风险评估:</el-col>
                        <el-col :span="8" class="card-label">
                          <div> {{item.risk_levelname}} 
                          
                          </div>
                        </el-col>
                           <span :span="4" @click="nurseVisible=true" style="font-size:12px;">
                     设置风险等级
                          </span>
                      </el-col>
             
                    </el-col>
                  </div>
                </el-col>
              </div>
            </el-card>
            
  
   
      </div>
    </el-col>
      <el-col :span="24" >
                                      <el-pagination
          background
          style="float:right"
          @size-change="handleSizeChange"
          :current-page="formInline.page"
          :page-sizes="[10, 20, 30, 100]"
          :page-size="formInline.limit"
          layout="sizes , total , prev, pager, next , jumper"
          @current-change="handlePagination"
          :total="total"
        >
        </el-pagination>  
                      </el-col>
                        <el-dialog
      title="风险等级"
      :visible.sync="nurseVisible"
      width="70%"


    >
      <span style="display: block">
       
        <viewTitle
          text="护理信息"
          style="font-size: 20px; margin-bottom: 20px"
        />
        <el-form ref="form" :model="nurseFrom" label-width="auto">
          <el-col :span="24" class="flexBoom">
            <el-col :span="12">
              <el-form-item label="原风险等级">
                <el-select
                  v-model="patientinfo.risk_levelname"
                  disabled
                  placeholder="原风险等级"
                >
                  <el-option
                    v-for="item in fenxiang"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新风险等级">
                <el-select
                  v-model="nurseFrom.risk_level"
                  placeholder="请选择新风险等级"
                >
                  <el-option
                    v-for="item in fenxiang"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="nurseVisible = false">取 消</el-button>
        <el-button type="primary" @click="nurseConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNurseLevel,
  getHospitalMember,
  getAdviceDrug,
  createAdvice,
  getAdviceFee,
  setRiskLevel,
    getAllIcu,
} from "@/api/zhuyanre";
import { getdictIndex } from "@/api/register";
import ViewTitle from "@/forComponents/viewTitle";
import kailiyizhu from "./kailiyizhu.vue";
import { getOrganization } from "@/api/organization";
import infocrad from "../../hospitalizedCharge/components/infocrad.vue"
import { parse } from 'path-to-regexp';
var that
export default {
  
   name:"patientList",
   data(){
     return {
      checka:"",
       patientData:{ //患者列表
         pattern:"0", //清单卡片切换
         sortType:"0", //排序床位、姓名
         scope:"0", //病区范围
         keyValue:"",
         checkBox:""
       },
       nurseFrom:{risk_level:'',id:""},
        selectParams: {
        keyword: "",
        page: 1,
        limit: 15,
        pageCount: 0,
        type:'',
      },
      nurseVisible:false,
          selectData: {
        selectData1: [],
        selectData2: [],
        selectData3: [],
      },
        getBuildlist:[],
       index_t:0,
       //患者列表
       patientlist:[],
       // 当前患者信息
       patientinfo:{},
       huli:[],
      formInline: {
        rightKeyValue: "",
        rightRadio:["2"],
        range:'3',
        page:1,
        limit:10,
        icu_id:'',
        nature:'',
        today:false,
      },
      tableData:[],
      Radiooptions:[{
          value: '1',
          label: '待入院'
        }, {
          value: '2',
          label: '在院'
        }, {
          value: '3',
          label: '申请出院'
        }, {
          value: '4',
          label: '待出院'
        }, {
          value: '5',
          label: '已出院'
        }],
        Radiooptions2:[{
            value: '1',
          label: '个人'
        },
        {
           value: '2',
          label: '科室'
        },
        { value: '3',
          label: '全院'}
        ],
        canceldialogdeposit:false,
        member_lv:[],
         disu: [],
      pinci: [],
      geiyao: [],
      xiyaojiaozhu: [],
      departmentoptions:[],
      danwei:[],
      shoufeitype:[],
      fenxiang:[],

      data_info:{
          count:'',
          todayEnter:'',
          todayLeave:''
      },
     }
   },
     mounted() {
    that = this;
    that.getHospitalMember();
    that.getNurseLevel()
    that.getmember_lv()


      getAllIcu({level:'2'}).then(res=>{
      this.getBuildlist=res.data
    })
  },
   methods:{
//详情
    setdengji(){
        this.nurseVisible=true
    },
    nurseConfirm(){
      var data=this.nurseFrom
      data.id=this.patientinfo.id
        setRiskLevel(data).then(res=>{
            if(res.code==200){
              this.nurseVisible=false
            }
        })
    },
        //病人性质
      getmember_lv() {
      getdictIndex({ group_id: "4,72" })

        .then(res => {
                  let data = res.data;
            data.forEach((item, key) => {
          if (item.id == 4) {
             that.member_lv=item.items;
          } else if (item.id == 72) {
            that.fenxiang = item.items;
          }
        });
      
        })
        .catch(e => {});
    },
    handleSizeChange(e) {
      this.formInline.limit = e;
      that.getHospitalMember();
    },
    handlePagination(e) {
      this.formInline.page = e;
      that.getHospitalMember();
    },
     //点击切换患者
         Select(i) {
      that.index_t = i;
      that.patientinfo = that.patientlist[i];
      //   this.$refs.rightCZ.getAdviceList(that.patientinfo.id)
      // console.log(that.patientinfo)
    },
     //获取护理
        getNurseLevel() {
      getNurseLevel({}).then(res => {
        that.huli = res.data;
      });
    },
    //搜索 
        radiochang(){
          that.getHospitalMember()
       },
     //患者数据
         getHospitalMember() {
      let data_t = {
        ipt_no: "",
        m_keyword: that.formInline.rightKeyValue,
        icu_id: "",
        bed: "",
        status: that.formInline.rightRadio.toString(),
        doctor_id: "",
        nurse_id: "",
        dept_id: "",
        nature:that.formInline.nature,
        today:that.formInline.today?1:'',
        range:that.formInline.range,
        page: that.formInline.page,
        limit: that.formInline.limit
      };
      getHospitalMember(data_t)
        .then(res => {
          let data = res.data.list;
          that.total = res.data.count;
            that.data_info=res.data
         that.patientlist=[]
          if (data.length != 0) {
            
            data.forEach((item, key) => {
              let arr = {
                ipt_no: item.ipt_no,
                id: item.id,
                name: item.member.name,
                id_card: item.member.id_card
              };
              that.tableData.push(arr);
            });
            that.patientlist = data;
            for (var i in that.patientlist) {
              that.patientlist[i].member.gender =
                that.patientlist[i].member.gender == 1
                  ? "男"
                  : that.patientlist[i].member.gender == 2
                  ? "女"
                  : "其他";
                    that.patientlist[i].nurse_levelneme = that.mapping(
                that.patientlist[i].nurse_level
              );
               that.patientlist[i].memberNature = that.mapxing(
                that.patientlist[i].member.nature
              );
                that.patientlist[i].risk_levelname = that.fengxianname(
                that.patientlist[i].risk_level
              );
               if (that.patientlist[i].disease) {
                    that.patientlist[i].diseaseName =  that.patientlist[i].disease.map(item=>{
              return item.disease_name
            })
             that.patientlist[i].diseaseName =  that.patientlist[i].diseaseName.join("&")
               }
         
             
            }

            that.patientinfo = data[0];
          }
        })
        .catch(e => {
          this.$message({
            message: e.message,
            type: "error"
          });
        });
    },
    //匹配护理
      mapping(num) {
      //  console.log(that.huli,'000000000')
      var art = "";
      for (var i in that.huli) {
        if (that.huli[i].id == num) {
          // console.log(that.huli[i],'000000000')
          art = that.huli[i].name;
        }
        return art;
      }
    },
    fengxianname(num) {
      var art = "";
         this.fenxiang.map(function(value,i,array){
            
            if (value.id == num) {
          art = value.name;
        }
        
       })
        return art;  
      
    },
    //匹配斌人性质
        //匹配斌人性质
    mapxing(num) {
      var art = "";
         this.member_lv.map(function(value,i,array){
            
            if (value.id == num) {
          art = value.name;
        }
        
       })
        return art;  
    },
    //
        getOrganization() {
      getOrganization().then(res=>{
        this.departmentoptions=this.deleteChildren(res.data)
      })
    },
    //删除空childern
    deleteChildren(arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
  
    // getServiceItem() {
    //  let d = {
    //     keyword: this.selectParams.keyword,
    //     page: this.selectParams.page,
    //     limit: this.selectParams.limit,
    //     source:1
    //   };

    //   getAdviceDrug(d).then((res) => {
    //     if (res.code == 200) {
    //       this.selectData.selectData2 = res.data.list;

    //       this.selectParams.pageCount = res.data.count;
    //       this.$refs.rightCZ.threeSelectLoading = false;
    //     }
    //   });
    // },
 
   },
     components: {
    ViewTitle,
    kailiyizhu,
    infocrad
  }
}
</script>

<style lang="scss">

.el-card__body{
  padding:0px;
}
.hosptal-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, 280px);
  grid-gap: 20px;

}

.hosptal_cardbox>>>.hosptal-card2{
  padding:0px !important;}
.hosptal-card2{

  width: 280px;
  height:240px;
  box-sizing: border-box;
  font-family: "仿宋";
  .card-header{
    height: 80px;
    .card-header-img{
      width: 80px;
      height: 80px;
      border-radius: 60px;
    }
  }
  .card-title{
    font-weight: bold;
    font-size: 40px;
    text-align:center;
    background:#DCDFE6;
    height:50px;
    line-height:50px;
    
  }
  .card-span{
    font-size: 20px;
    color:#000000;
     font-weight: bold;
  }
  .card-span>div:nth-child(1){
    padding-top: 10px;
  }
  .card-span>div:nth-child(2){
    padding-top: 24px;
  }
  .card-radio{
    width: 30px;
    height: 30px;
    background: #Fff;
    border:1px solid #e5e5e5;
    border-radius: 30px;
    margin-top: 20px;
  }
  .card-label{
    display: flex;
    flex-wrap: wrap;
   
    // grid-template-columns: 1fr 1fr 1fr;
    // grid-gap:10px;
    div{
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 0 10px;
      color:#fff;
       border-radius:4px;
    background:#e9686b
    }
  }
  .box_user{
    height: 380px;
      position: relative;
  }
  .img_box{
    width:46px;
    height:46px;
  }
  .span_title{
    font-weight: bold;
   
  }
}
.separate {
    .dialog-text {
        font-size: 18px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
}
.zaiinfo{
  margin:20px 0px;

  padding:0px 10px;
  border-left:4px solid rgb(133, 206, 97);
  font-size: 24px;
}
</style>